<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import { ref } from 'vue';
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import { ElMessage } from 'element-plus';

defineProps({
  height: Number
})
const emit = defineEmits(['clickReply'])

const editor = ref(null)
const initialEditor = (el) => {
  const options = {
    theme: 'snow',
    modules: {
      toolbar: [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'size': ['small', 'large', 'huge'] }, 'bold', 'italic', 'underline', 'strike', 'code-block', 'link'],
        ['image', 'blockquote'],

        [{ 'color': [] }, { 'background': [] }],

        [{ 'list': 'ordered' }, { 'list': 'bullet' }],

        [{ 'align': [] }],
      ]
    }
  }
  editor.value = new Quill(el, options)
}

const replayWrap = () => {
  if (editor.value.getLength() < 10) {
    return ElMessage.warning('最少需要输入10个字符')
  }
  if (editor.value.getLength() > 100000) {
    return ElMessage.warning('最多输入长度为 100000')
  }
  emit('clickReply', editor.value.getContents())
  editor.value.setContents('')
}

</script>

<template>
  <div :ref="initialEditor" class="rich"></div>
  <el-button class="reply-button" type="primary" @click="replayWrap">回复</el-button>
</template>

<style lang="sass" scoped>

.rich
  width: 100%
  height: calc(100vh - 250px)
.reply-button
  margin-top: 26px
</style>
